<!-- src/views/system/phone1/orderDetail.vue -->
<template>
  <div class="order-detail-page">
    <!-- 背景渐变 -->
    <div class="background-gradient"></div>

    <!-- 主要内容容器 -->
    <div class="container">
      <!-- 运单详情卡片 -->
      <div class="detail-card">
        <!-- 标题和返回按钮 -->
        <div class="header">
          <h2 class="title">运单详情</h2>
          <el-button
            class="back-btn"
            icon="el-icon-arrow-left"
            @click="goBack"
          >
            返回
          </el-button>
        </div>

        <!-- 详情信息 -->
        <div class="detail-content" v-loading="loading">
          <!-- 司机姓名 -->
          <div class="detail-row">
            <div class="row-label">司机姓名:</div>
            <div class="row-value">{{ orderInfo.driverName || '-' }}</div>
          </div>

          <!-- 司机身份证号 -->
          <div class="detail-row">
            <div class="row-label">身份证号:</div>
            <div class="row-value">{{ orderInfo.driverIdCard || '-' }}</div>
          </div>

          <!-- 车牌号 -->
          <div class="detail-row">
            <div class="row-label">车牌号:</div>
            <div class="row-value">{{ orderInfo.licensePlate || '-' }}</div>
          </div>

          <!-- 货物名称 -->
          <div class="detail-row">
            <div class="row-label">货物名称:</div>
            <div class="row-value">{{ orderInfo.itemName || '-' }}</div>
          </div>

          <!-- 发货方 -->
          <div class="detail-row">
            <div class="row-label">发货方:</div>
            <div class="row-value">{{ orderInfo.sendoutCompany || '-' }}</div>
          </div>

          <!-- 收货方 -->
          <div class="detail-row">
            <div class="row-label">收货方:</div>
            <div class="row-value">{{ orderInfo.receiveCompany || '-' }}</div>
          </div>

          <!-- 二维码行 -->
          <div class="detail-row">
            <div class="row-label">二维码:</div>
            <div class="row-value">
              <div class="qrcode-wrapper">
                <!-- 直接展示Base64图片 -->
                <img
                  v-if="orderInfo.sqare03"
                  :src="'data:image/png;base64,' + orderInfo.sqare03"
                  class="qrcode-image"
                  alt="二维码"
                />
                <div class="qrcode-empty" v-else>
                  暂无二维码信息
                </div>
                <div class="qrcode-tip" v-if="orderInfo.licensePlate">
                  车牌号: {{ orderInfo.licensePlate }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: "OrderDetail",
  data() {
    return {
      loading: true,
      orderInfo: {}
    }
  },
  created() {
    // 从路由参数获取预约码
    const appointmentCode = this.$route.query.code
    if (appointmentCode) {
      this.fetchOrderDetail(appointmentCode)
    } else {
      this.$message.error("缺少预约码参数")
      this.goBack()
    }
  },
  methods: {
    // 获取运单详情
    async fetchOrderDetail(code) {
      this.loading = true
      try {
        const response = await request({
          url: '/appointment/waybill',
          method: 'get',
          params: { code }
        })

        this.orderInfo = response.data || {}
      } catch (error) {
        console.error("获取运单详情失败:", error)
        this.$message.error(error.message || "获取运单详情失败")
      } finally {
        this.loading = false
      }
    },

    // 返回预约页面
    goBack() {
      this.$router.push("/phone1/apponitment")
    }

  }
}
</script>

<style scoped lang="scss">
.order-detail-page {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .background-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 1;
  }

  .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 400px;
    padding: 20px;
  }
}

.detail-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  margin: 20px;

  @media (max-width: 480px) {
    padding: 20px;
    margin: 15px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;

  @media (max-width: 480px) {
    font-size: 20px;
  }
}

.back-btn {
  background: #f5f7fa;
  border-color: #dcdfe6;
  color: #606266;
  padding: 8px 16px;

  &:hover {
    background: #ecf5ff;
    border-color: #b3d8ff;
    color: #409eff;
  }
}

.detail-content {
  min-height: 300px;
}

.detail-row {
  display: flex;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.row-label {
  font-size: 14px;
  color: #666;
  width: 90px;
  margin-right: 15px;
  flex-shrink: 0;
  font-weight: 500;
}

.row-value {
  font-size: 16px;
  color: #333;
  flex: 1;
  word-break: break-all;
  line-height: 1.4;
}

.qrcode-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* 新增二维码图片样式 */
.qrcode-image {
  max-width: 120px;
  max-height: 120px;
  margin-bottom: 10px;
}

#qrcode {
  margin-bottom: 10px;
  min-height: 120px;
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qrcode-tip {
  font-size: 14px;
  color: #666;
}

.qrcode-empty {
  font-size: 14px;
  color: #999;
  font-style: italic;
  min-height: 120px;
  display: flex;
  align-items: center;
}

// 移动端适配
@media (max-width: 480px) {
  .detail-card {
    padding: 20px;
    margin: 15px;
  }

  .header {
    margin-bottom: 15px;
  }

  .title {
    font-size: 20px;
  }

  .row-label {
    font-size: 13px;
    width: 80px;
  }

  .row-value {
    font-size: 15px;
  }

  #qrcode {
    min-height: 100px;
    min-width: 100px;
  }
}
</style>
